<template>
<div class="main-container">
  <common_nav title="角色管理" backTitle="" :appPathObj="{}" :routerPath="{}"></common_nav>

  <div class="operator">
    <el-button type="primary" size="medium" @click="edit({})">添加角色</el-button>
  </div>
  <el-table
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      v-loading="loading"
      highlight-current-row
      :default-expand-all="expand"
      @current-change="handleCurrentChange"
      :tree-props="{children: 'children'}"
      row-key="id"
      ref="multipleTable"
      border
      class="eltable"
      :data="list"   style="width: 100%"  >
    <el-table-column  property="id" align="center" type='' label="编号" width="70"></el-table-column>
    <el-table-column  property="title"  label="角色名称"></el-table-column>
<!--    <el-table-column property="sort" label="排序">
      <template slot-scope="scope">
        <el-input style="width:60px;" size="mini" placeholder="排序" @blur.stop="update(scope.row,'sort')" v-model="scope.row.sort"></el-input>
      </template>
    </el-table-column>-->
    <el-table-column  property="status" label="状态">
      <template slot-scope="scope">
        <el-switch active-value="1" inactive-value="0" @change="update(scope.row,'status')" v-model="scope.row.status"></el-switch>
      </template>
    </el-table-column>
    <el-table-column  property="remark"  label="描述"></el-table-column>
    <el-table-column label="操作" width="240">
      <template slot-scope="scope">
        <el-button size="mini" @click="edit(scope.row)" type="primary" >修改</el-button>
        <el-button size="mini" @click="setPermissions(scope.row)" type="primary" >设置权限</el-button>

      </template>
    </el-table-column>
  </el-table>

  <edit :show.sync="dialog.editStatus" :info="info" :list="list" @callFn="genTree"></edit>
  <setPermissions :show.sync="dialog.setPermissionsStatus" :info="info" @callFn="genTree"></setPermissions>
</div>
</template>

<script>
import { genTree,updateExt  } from '@/api/user/role'
import edit from './edit';
import setPermissions from './setPermissions';

export default {
  name: "role_index",
  components: { edit,setPermissions },
  data() {
    return {
      loading: false,
      expand:true,
      list: [],
      info: {},
      dialog: {
        editStatus: false,
        setPermissionsStatus: false
      }
    }
  },
  created() {
    this.genTree()
  },
  methods: {
    genTree() {
      genTree().then(res => {
        if (res.code == 0) {
          this.list = res.data.list
        }
      })
    },
    edit(info) {
      this.info = info
      this.dialog.editStatus = true
    },
    setPermissions(info) {
      this.info = info
      this.dialog.setPermissionsStatus = true
    },
    update(row,field){
      updateExt({id:row.id, field: field,value:row[field]}).then(res=>{
        if (res.code == 0) {
          this.genTree()
        }
      })
    },
    handleCurrentChange(val) {
      this.id = val.id
      this.single = false
    },
  }
}
</script>

<style scoped>
.operator {
  margin: 10px 0 10px 0;
}
</style>